<template>
    <div class="book-detail-container">
      <download></download>
        <header class="book-detail-header">
            <img :src="bookItem.backgroundImg" alt="">
        </header>
        <div class="book-detail-box">
            <h2>{{bookItem.title}}</h2>
            <div class="audio-intro">
                <h3>音频简介</h3><p class="audio-timer">音频时间：<span>{{bookItem.audioDuration}}</span></p>
                <p class="audio-word">{{bookItem.summary}}</p>
            </div>
        </div>
        <div class="audio-list" v-html="bookItem.introduction">
            <!-- <h3>你将听到</h3>
            <div v-html="bookItem.introduction">
            </div> -->
        </div>
        <!-- <div class="recommend-book-box">
            <h3>推荐目录</h3>
            <div class="book-intro" v-html="bookItem.introduction">
            </div>
        </div> -->
        <div class="bole-box">
            <h3>伯乐出品  质量保证</h3>
            <div class="bole-img-box">
                <div class="img-item" v-for="(member,index) in bookItem.memberList" :key="index">
                    <img :src="member.headUrl" alt="">
                    <p class="name">{{member.name}}</p>
                    <p>{{member.roleText}}</p>
                </div>
            </div>
            <p class="bole-intro">6个环节211小时精心打磨完成上线</p>
        </div>
        <share-wechat v-if="shareShow" @destroyF="destroyFix"></share-wechat>
        <listen-footer :isShow="isShow" :postData="postData" @shareFn="shareFn"></listen-footer>
        <com-dialog v-if="isPlay" :dialogConent="dialogConent" @leftBtn="playBtn" @rightBtn="sureBtn"></com-dialog>
    </div>
</template>
<script>
import comDialog from '@/components/comDialog.vue'
import listenFooter from './listenFooter.vue'
import { post } from '../../../../util/http.js'
import {Toast} from 'mint-ui'
import market from '@/api/market.js'
import shareWechat from '../shareWechat.vue'
import cookie from '../../../../util/cookie.js'
import third from '@/api/thirdPay.js'
import download from '../../../components/download.vue'

export default {
    components: {
        comDialog,
        listenFooter,
        shareWechat,
		download
    },
    data () {
        return {
            shareShow: false,
            dialogConent: {
                title: '已成功拿下该书籍~<br/>是否前往懂行APP进行查看',
                left: '立即播放',
                right: '立即前往'
            },
            isPlay: false,
            isShow: false,
            level: -1,
            postData: {},
            bookItem: {},
            uid: '',
            isAgent: '',
            agentId: '',
            level: this.level,
            des: '',
            title: '',
            imgUrl: '',
            myAgentId: this.$route.query.myAgentId
        }
    },
    mounted() {
        if (~~this.$route.query.toShare === 1) {
            window.location.href = "http://sharebook.rz158.com/#/bookDetail?agentId=" + this.$route.query.agentId + "&id=" + this.$route.query.id
        } else {
            this.postData.mid = this.$route.query.pid
            this.getBookInfo(this.postData)
            this.isAgent = localStorage.getItem('dongHang_data') ? true : false
            this.agentId = this.$route.query.agentId
            this.level = this.isAgent ? JSON.parse(localStorage.getItem('dongHang_data')).level : -1
            this.uid = localStorage.getItem('dongHang_common_user') ? JSON.parse(localStorage.getItem('dongHang_common_user')).uid : false
        }
        if (this.myAgentId) {
            sessionStorage.myAgentId = this.myAgentId
        }
    },
    methods: {
        weiXinConfig() {
          var link = location.href.split('#')[0] + "/#/bookDetail?&from=singlemessage&agentId=" + this.agentId + "&id=" + this.$route.query.pid + "&toShare=" + 1;
          var url = 'http://dlsapi.rz158.com/thirdPay/getConfig?url=' + location.href.split('#')[0];
          third.sharedWeiXin(url, this.title, this.des, link, this.imgUrl);
        },
        shareFn () {
          this.shareShow = true;

        },
        destroyFix() {
            this.shareShow = false;
        },
        getBookInfo(data) {
             post('http://dhapi3.rz158.com/mindMain/getMindMainByIdV3',data).then(res => {
                if(res.code == 0) {
                    this.bookItem = res.result
                    cookie.set('title', this.bookItem.title)
                    cookie.set('allprice', this.bookItem.price)
                    this.title = this.bookItem.title;
                    this.imgUrl = this.bookItem.backgroundImg;
                    this.des = this.bookItem.summary;
                    this.weiXinConfig()
                    if(this.isAgent) {
                        this.isShow = 3
                    } else {
                        if (this.uid) {
                            market.checkLogin(this.uid).then(res => {
                                if (res.code == 0) {
                                    // let info2 = JSON.parse(window.localStorage.getItem('DongHang_common_user'))
                                    this.postData.mid = this.$route.query.pid
                                    this.postData.uid = this.uid
                                    if (this.bookItem.isMember == 0) {
                                        this.isShow = 0
                                    } else if (this.bookItem.isMember == 1){
                                        if (this.bookItem.isBuy == 0) {
                                            this.isShow = 1
                                        } else {
                                            this.isShow = 2
                                        }
                                    }
                                } 
                            })
                        } else {
                            this.isShow = 0
                        }           
                    }
                }
            })
        },
        playBtn () {
            
        },
        sureBtn () {
            window.location.href = 'http://donghang.rz158.com/html/html_rource_bl/html/client/app.html'
        }

    }
}
</script>

<style lang="less" scoped>
    .book-detail-header {
        text-align: center;
        background: #efefef;
        margin-top: 1rem;
        padding: 0.5rem 0;
        img {
            width: 3rem;
        }
    }
    .book-detail-box {
        padding: 0.3rem 0.3rem 0 0.3rem;
        h2 {
            padding-bottom: 0.3rem;
            font-size: 0.36rem;
            color: #0a0a0a;
            font-weight: normal;
            border-bottom: 1px solid #ccc;
        }
        .audio-intro {
            padding: 0.2rem 0;
            border-bottom: 1px solid #ccc; 
            overflow: auto;
            h3 {
                font-size: 0.3rem;
                color: #0a0a0a;
                font-weight: normal;
                float: left;
            }
            .audio-timer {
                color: #707070;
                font-size: 0.26rem;
                float: right;
            }
            .audio-word {
                clear: both;
                color: #282828;
                font-size: 0.28rem;
                margin-top: 0.55rem;
                text-align: justify;
            }
        }
    }
    .audio-list {
        padding: 0.3rem 0.3rem 0 0.3rem;
        font-size: 0.3rem;
        h3 {
            color: #0a0a0a;
            margin-bottom: 0.2rem;
        }
        ul {
            font-size: 0.28rem;
            color: #282828;
            padding-bottom: 0.3rem;
            border-bottom: 1px solid #ccc;             
        }
    }
    .recommend-book-box {
        padding: 0.3rem 0.3rem 0 0.3rem;
        font-size: 0.3rem;
        h3 {
            color: #0a0a0a;
            margin-bottom: 0.2rem;
        }
        .book-intro {
            font-size: 0.28rem;
            color: #282828;
            padding-bottom: 0.3rem;
            border-bottom: 1px solid #ccc;  
        }
    }
    .bole-box {
        padding: 0.3rem 0.3rem 1rem 0.3rem;
        font-size: 0.3rem;
        h3 {
            color: #0a0a0a;
            margin-bottom: 0.2rem;
        }
        .bole-img-box {
            display: flex;
            text-align: center;
            .img-item {
                flex: 1;
                img {
                    width: 0.7rem;
                    height: 0.7rem;
                    border-radius: 50%;
                }
                .name {
                    color: #0a0a0a;
                    font-size: 0.24rem;
                }
                p {
                    color: #707070;
                    font-size: 0.2rem;
                }
            }
        }
        .bole-intro {
            color: #707070;
            font-size: 0.26rem;
            padding-top: .2rem;
            &::before {
                content: '';
                display: inline-block;
                width: 0.28rem;
                height: 0.28rem;
                background: url(../../../assets/img/icon-agree.png) no-repeat;
                background-size: 100%;
                margin-right: 0.1rem;
            }
        }
    }
</style>
